import { SelectedPage } from "../..//shared/types"
import useMediaQuery from "../..//hooks/useMediaQuery"
import ActionButton from "../../shared/ActionButtons"
import HomePageText from "../../assets/image/banner.png"
import HomePageGraphic from "../../assets/image/player.png"
import SponsorRedBull from "../../assets/image/SponsorRedBull.png"
import SponsorForbes from "../../assets/image/SponsorForbes.png"
import SponsorFortune from "../../assets/image/SponsorFortune.png"
import AnchorLink from "react-anchor-link-smooth-scroll"
import { gsap } from "gsap"
import { ScrollTrigger } from "gsap/ScrollTrigger"
import { useEffect, useRef } from "react"

// 注册ScrollTrigger插件
gsap.registerPlugin(ScrollTrigger)

type Props={
  setSelectedPage:(value:SelectedPage)=>void
}
const Home = ({setSelectedPage}: Props) => {
  console.log("setSelectedPage prop:", setSelectedPage, typeof setSelectedPage); 
  const isAboveMediumScreens = useMediaQuery("(min-width:1060px)")
  
  // GSAP refs
  const headerRef = useRef<HTMLDivElement>(null)
  const textRef = useRef<HTMLDivElement>(null)
  const actionsRef = useRef<HTMLDivElement>(null)
  const imageRef = useRef<HTMLDivElement>(null)
  const sectionRef = useRef<HTMLElement>(null)

  // GSAP animations
  useEffect(() => {
    const ctx = gsap.context(() => {
      // 设置初始状态
      gsap.set([textRef.current, actionsRef.current, imageRef.current], {
        opacity: 0,
        x: -50
      })

      // 创建时间线
      const tl = gsap.timeline({
        scrollTrigger: {
          trigger: sectionRef.current,
          start: "top 80%",
          end: "bottom 20%",
          onEnter: () => setSelectedPage(SelectedPage.Home),
          once: true
        }
      })

      // 添加动画序列
      tl.to(textRef.current, {
        opacity: 1,
        x: 0,
        duration: 0.5,
        ease: "power2.out"
      })
      .to(actionsRef.current, {
        opacity: 1,
        x: 0,
        duration: 0.5,
        delay: 0.2,
        ease: "power2.out"
      }, "-=0.3")
      .to(imageRef.current, {
        opacity: 1,
        x: 0,
        duration: 0.5,
        ease: "power2.out"
      }, "-=0.3")

    }, sectionRef)

    return () => ctx.revert()
  }, [setSelectedPage])
  
  return (
  <section ref={sectionRef} id="home" className="gap-16 bg-gray-20 py-10 md:h-full md:pb-0 -mt-5" >
    {/* IMAGE AND MAIN HEADER */}
    <div className=" w-full flex items-center justify-center font-bold text-primary-500 -mb-20 text-5xl font-serif">广 东 海 洋 大 学 体 育 馆</div>
    <div className="md:flex mx-auto w-5/6 pt-24 items-center justify-center md:h-5/6">
  
      {/* MAIN HEADER */}
      <div className="z-10 mt-32 md:basis-3/5 ">
        <div ref={textRef} className="md:-mt-20">
          <div className="relative">
            <div className="before:absolute before:-top-20 before:-left-20 before:z-[-1] before:content-abstractwaves">
              <img alt="home-page-text" src={HomePageText}/>
            </div>
          </div>

          <p className="mt-8 text-sm md:text-start">
          顶尖场馆，卓越训练，专业教师课程。
          世界一流设施，助你塑造健康体态。
          开启你的健康之旅，现在就行动！
          </p>
        </div>
        <div ref={actionsRef} className="flex gap-8 mt-8 items-center md:justify-start">   
        {/* Actions */}
        <ActionButton  setSelectedPage={setSelectedPage} >
          Join Now
        </ActionButton>
        <AnchorLink
          className="text-sm font-bold text-primary-500 underline hover:text-secondary-500"
          onClick={() => setSelectedPage(SelectedPage.ContactUs)}
          href={`#${SelectedPage.ContactUs}`}
        >
          <p>Learn More</p>
        </AnchorLink>
        </div>
     
      </div>
       {/* Image */}
       <div ref={imageRef} className="md:z-10 flex  justify-center mt-16 basis-3/5
       md:ml-40 md:mt-16 md:justify-items-end">
      <img src={HomePageGraphic} alt="home-page-graphic" />
    </div>
    </div>
   {/* SPONSORS */}
   {isAboveMediumScreens && (
    <div className="h-[150px] w-full bg-primary-100 py-10">
      <div className="mx-auto w-5/6">
        <div className="flex w-3/5 justify-between  items-center ">
          <img alt="redbull-sponsor" src={SponsorRedBull} />
          <img alt="forbes-sponsor" src={SponsorForbes} />
          <img alt="fortune-sponsor" src={SponsorFortune} />
        </div>
      </div>
    </div>
)
}
   
  </section>
  )
}

export default Home